<template>
	<view style="display: flex;align-items: center;justify-content: center;position: relative;"
		class="ag-custom-component-popup">
		<el-cascader class="ag-custom-component-popup" size="large" :options="regionData" v-model="currentValue"
			@change="onChange">
		</el-cascader>
	</view>
</template>

<script>
	import {
		regionDataPlus,
		CodeToText,
		TextToCode
	} from 'element-china-area-data'
	export default {
		data() {
			return {
				regionData: regionDataPlus,
				currentValue: []
			}
		},
		methods: {
			onChange(e) {
				console.log(e)
				//this.updateFilter()
			},
			onFloatingFilterChanged(a) {
				this.currentValue = a
				console.log('a', this.currentValue)
				this.updateFilter()
			},
			updateFilter() {
				this.params.filterChangedCallback();
			},

			doesFilterPass(params) {
				if(params.data.area){
					let hit = true
					let str = ''
					for (let s of this.currentValue) {
						str += ''+s
					}
					let str2 = ''
					for (let s of params.data.area) {
						str2+=''+s 
					}
					console.log('cc',str2)
					console.log(str)
					console.log('hit',str.indexOf(str2))
					return str.indexOf(str2)!=-1
				}
				return false 
				
			},
			isFilterActive() {
				if (this.currentValue != [] && this.currentValue[0] != '') {
					return true
				}
			},
			// this example isn't using getModel() and setModel(),
			// so safe to just leave these empty. don't do this in your code!!!
			getModel() {},

			setModel() {},
		}
	}
</script>
